<template>
  <div class="app-container home">
    <!-- 顶部横幅区域 -->
    <el-row :gutter="20" class="banner-section">
      <el-col :span="24">
        <div class="banner">
          <h1>evo-draw 漫画创作平台</h1>
          <p class="subtitle">AI驱动的智能漫画创作系统，让文字跃然纸上</p>
          <!-- <div class="banner-actions">
            <el-button type="primary" size="large" @click="goToNovelManagement">
              <i class="el-icon-reading"></i> 开始创作
            </el-button>
            <el-button size="large" @click="goToDemo">
              <i class="el-icon-video-play"></i> 查看演示
            </el-button>
          </div> -->
        </div>
      </el-col>
    </el-row>

    <!-- 核心功能展示 -->
    <el-row :gutter="20" class="features-section">
      <el-col :span="24">
        <h2 class="section-title">核心功能</h2>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card class="feature-card" shadow="hover">
          <div class="feature-icon">
            <i class="el-icon-notebook-2"></i>
          </div>
          <h3>小说管理</h3>
          <p>创建和管理小说基本信息，包括名称、世界观、类型和标签</p>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card class="feature-card" shadow="hover">
          <div class="feature-icon">
            <i class="el-icon-user"></i>
          </div>
          <h3>角色管理</h3>
          <p>创建和管理小说角色，生成角色图像和AI绘画提示词</p>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card class="feature-card" shadow="hover">
          <div class="feature-icon">
            <i class="el-icon-document"></i>
          </div>
          <h3>章节管理</h3>
          <p>管理小说章节，支持导入docx格式文档</p>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card class="feature-card" shadow="hover">
          <div class="feature-icon">
            <i class="el-icon-camera"></i>
          </div>
          <h3>分镜生成</h3>
          <p>基于AI自动生成分镜脚本和对应的漫画图片</p>
        </el-card>
      </el-col>
    </el-row>

    <!-- 技术架构 -->
    <el-row :gutter="20" class="tech-section">
      <el-col :span="24">
        <h2 class="section-title">技术架构</h2>
      </el-col>
      <el-col :sm="24" :lg="12">
        <el-card class="tech-card">
          <template v-slot:header>
            <div class="tech-header">
              <i class="el-icon-monitor"></i>
              <span>前端技术栈</span>
            </div>
          </template>
          <div class="tech-content">
            <el-tag type="primary">Vue3</el-tag>
            <el-tag type="success">Element Plus</el-tag>
            <el-tag type="info">Vite</el-tag>
            <el-tag type="warning">Vuex</el-tag>
            <el-tag type="danger">Axios</el-tag>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="12">
        <el-card class="tech-card">
          <template v-slot:header>
            <div class="tech-header">
              <i class="el-icon-cpu"></i>
              <span>后端技术栈</span>
            </div>
          </template>
          <div class="tech-content">
            <el-tag type="primary">Spring Boot</el-tag>
            <el-tag type="success">MyBatis</el-tag>
            <el-tag type="info">Spring Security</el-tag>
            <el-tag type="warning">JWT</el-tag>
            <el-tag type="danger">MySQL</el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 创作流程 -->
    <el-row :gutter="20" class="workflow-section">
      <el-col :span="24">
        <h2 class="section-title">创作流程</h2>
        <div class="workflow-steps">
          <div class="step">
            <div class="step-number">1</div>
            <div class="step-content">
              <h4>创建小说</h4>
              <p>设定基本信息、世界观和标签</p>
            </div>
          </div>
          <div class="step-arrow">
            <i class="el-icon-arrow-right"></i>
          </div>
          <div class="step">
            <div class="step-number">2</div>
            <div class="step-content">
              <h4>设计角色</h4>
              <p>创建角色并生成角色参考图</p>
            </div>
          </div>
          <div class="step-arrow">
            <i class="el-icon-arrow-right"></i>
          </div>
          <div class="step">
            <div class="step-number">3</div>
            <div class="step-content">
              <h4>编写章节</h4>
              <p>导入或编写小说章节内容</p>
            </div>
          </div>
          <div class="step-arrow">
            <i class="el-icon-arrow-right"></i>
          </div>
          <div class="step">
            <div class="step-number">4</div>
            <div class="step-content">
              <h4>生成漫画</h4>
              <p>AI自动生成分镜和漫画图像</p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 系统特色 -->
    <el-row :gutter="20" class="features-detail-section">
      <el-col :span="24">
        <h2 class="section-title">系统特色</h2>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <div class="feature-detail">
          <div class="feature-detail-icon">
            <i class="el-icon-s-platform"></i>
          </div>
          <h3>双前端系统设计</h3>
          <p>提供创作平台和后台管理系统两种界面，满足不同使用场景</p>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <div class="feature-detail">
          <div class="feature-detail-icon">
            <i class="el-icon-magic"></i>
          </div>
          <h3>AI驱动创作</h3>
          <p>利用先进AI模型辅助漫画创作全过程，提升创作效率</p>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <div class="feature-detail">
          <div class="feature-detail-icon">
            <i class="el-icon-connection"></i>
          </div>
          <h3>完整工作流</h3>
          <p>从文本到图像的完整漫画创作流程，一站式解决方案</p>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <div class="feature-detail">
          <div class="feature-detail-icon">
            <i class="el-icon-picture"></i>
          </div>
          <h3>角色一致性</h3>
          <p>通过角色参考图确保角色在不同场景中的一致性</p>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <div class="feature-detail">
          <div class="feature-detail-icon">
            <i class="el-icon-chat-line-round"></i>
          </div>
          <h3>提示词优化</h3>
          <p>AI自动优化生成提示词以获得更好的生成效果</p>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <div class="feature-detail">
          <div class="feature-detail-icon">
            <i class="el-icon-set-up"></i>
          </div>
          <h3>模块化设计</h3>
          <p>清晰的功能模块划分，便于扩展和维护</p>
        </div>
      </el-col>
    </el-row>

    <!-- 快速开始 -->
    <el-row :gutter="20" class="quick-start-section">
      <el-col :span="24">
        <el-card class="quick-start-card">
          <template v-slot:header>
            <div class="quick-start-header">
              <i class="el-icon-rocket"></i>
              <span>快速开始</span>
            </div>
          </template>
          <div class="quick-start-content">
            <p>准备好开始您的漫画创作之旅了吗？按照以下步骤快速上手：</p>
            <ol>
              <li>在左侧导航栏点击"小说管理"</li>
              <li>创建您的第一部小说并设置基本信息</li>
              <li>在"角色管理"中为小说添加主要角色</li>
              <li>在"章节管理"中创建章节并导入内容</li>
              <li>进入"分镜管理"生成您的第一组漫画</li>
            </ol>
            <!-- <div class="quick-start-actions">
              <el-button type="primary" @click="goToNovelManagement">开始创作</el-button>
              <el-button @click="showHelpDialog">查看帮助文档</el-button>
            </div> -->
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

function goToNovelManagement() {
  router.push('/novel/novel')
}

function goToDemo() {
  // 这里可以跳转到演示页面或打开演示视频
  console.log('查看演示')
}

function showHelpDialog() {
  // 这里可以显示帮助对话框或跳转到帮助页面
  console.log('查看帮助文档')
}
</script>

<style scoped lang="scss">
.home {
  padding: 20px;
  
  .banner-section {
    margin-bottom: 40px;
    
    .banner {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 12px;
      padding: 60px 40px;
      text-align: center;
      color: white;
      
      h1 {
        font-size: 2.5rem;
        margin-bottom: 15px;
        font-weight: 700;
      }
      
      .subtitle {
        font-size: 1.2rem;
        margin-bottom: 30px;
        opacity: 0.9;
      }
      
      .banner-actions {
        .el-button {
          margin: 0 10px;
          padding: 12px 24px;
          font-size: 1rem;
        }
      }
    }
  }
  
  .section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
    color: #303133;
    position: relative;
    
    &::after {
      content: '';
      display: block;
      width: 60px;
      height: 3px;
      background: #409EFF;
      margin: 15px auto;
      border-radius: 2px;
    }
  }
  
  .features-section {
    margin-bottom: 40px;
    
    .feature-card {
      text-align: center;
      height: 100%;
      transition: transform 0.3s;
      
      &:hover {
        transform: translateY(-5px);
      }
      
      .feature-icon {
        font-size: 3rem;
        color: #409EFF;
        margin-bottom: 15px;
      }
      
      h3 {
        margin-bottom: 15px;
        color: #303133;
      }
      
      p {
        color: #606266;
        line-height: 1.6;
      }
    }
  }
  
  .tech-section {
    margin-bottom: 40px;
    
    .tech-card {
      height: 100%;
      
      .tech-header {
        display: flex;
        align-items: center;
        font-weight: bold;
        
        i {
          margin-right: 10px;
          font-size: 1.2rem;
          color: #409EFF;
        }
      }
      
      .tech-content {
        .el-tag {
          margin: 5px;
          font-size: 0.9rem;
          padding: 8px 12px;
        }
      }
    }
  }
  
  .workflow-section {
    margin-bottom: 40px;
    
    .workflow-steps {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      
      .step {
        text-align: center;
        padding: 20px;
        
        .step-number {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background: #409EFF;
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.5rem;
          font-weight: bold;
          margin: 0 auto 15px;
        }
        
        .step-content {
          h4 {
            margin-bottom: 10px;
            color: #303133;
          }
          
          p {
            color: #606266;
            font-size: 0.9rem;
          }
        }
      }
      
      .step-arrow {
        padding: 0 20px;
        color: #409EFF;
        font-size: 1.5rem;
        
        @media (max-width: 768px) {
          transform: rotate(90deg);
          padding: 20px 0;
        }
      }
      
      @media (max-width: 768px) {
        flex-direction: column;
      }
    }
  }
  
  .features-detail-section {
    margin-bottom: 40px;
    
    .feature-detail {
      text-align: center;
      padding: 30px 20px;
      
      .feature-detail-icon {
        font-size: 3rem;
        color: #409EFF;
        margin-bottom: 20px;
      }
      
      h3 {
        margin-bottom: 15px;
        color: #303133;
      }
      
      p {
        color: #606266;
        line-height: 1.6;
      }
    }
  }
  
  .quick-start-section {
    margin-bottom: 40px;
    
    .quick-start-card {
      .quick-start-header {
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 1.2rem;
        
        i {
          margin-right: 10px;
          color: #409EFF;
        }
      }
      
      .quick-start-content {
        p {
          margin-bottom: 20px;
          color: #606266;
        }
        
        ol {
          margin-bottom: 25px;
          padding-left: 20px;
          color: #606266;
          
          li {
            margin-bottom: 10px;
            line-height: 1.6;
          }
        }
        
        .quick-start-actions {
          text-align: center;
          
          .el-button {
            margin: 0 10px;
          }
        }
      }
    }
  }
}
</style>
